<template>
  <div class="article">
    <van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
      <template #pulling="props">
        <img
          class="doge"
          src="https://img01.yzcdn.cn/vant/doge.png"
          :style="{ transform: `scale(${props.distance / 80})` }"
        >
      </template>

      <!-- 释放提示 -->
      <template #loosing>
        <img class="doge" src="https://img01.yzcdn.cn/vant/doge.png">
      </template>

      <!-- 加载提示 -->
      <template #loading>
        <img class="doge" src="https://img01.yzcdn.cn/vant/doge-fire.jpg">
      </template>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item.art_id" :title="item.title" @click="$router.push('/articleDesc/' + item.art_id)">
          <template #label>
            <van-grid v-if="item.cover.images" :column-num="item.cover.images.length">
              <van-grid-item v-for="(img, index) in item.cover.images" :key="index">
                <van-image lazy-load :src="img" />
              </van-grid-item>
            </van-grid>

            <div class="meta">
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count }}评论</span>
              <span>{{ item.pubdate| relative }}</span>
              <span v-if="tokenInfo.token" class="close" @click.stop="close(item)">
                <van-icon name="cross" />
              </span>
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { GetArticleList } from '@/api/articleList'
import { mapState } from 'vuex'
export default {

  name: 'ArticleList',
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      time: null,
      isLoading: false
    }
  },
  computed: {
    ...mapState('user', ['tokenInfo'])
  },
  // async created() {
  //   const res = await GetArticleList(this.channel.id, +new Date())
  //   console.log(res)
  // },
  // 文章移出==========================================
  created() {
    this.$eventbus.$on('del-article', (obj) => {
      const { channelsId, articleId } = obj
      if (channelsId !== this.channel.id) return
      this.list = this.list.filter(item => item.art_id !== articleId)
    })
  },
  methods: {
    async  onLoad() {
      // console.log(this.list.length)
      if (!this.time) {
        this.time = +new Date()
      }
      const { data } = await GetArticleList(this.channel.id, this.time)
      console.log(data)
      this.time = data.pre_timestamp
      this.list = this.list.concat(data.results)
      // console.log(data.results.length)
      this.loading = false
      if (data.results.length === 0 || data.pre_timestamp === null) {
        this.finished = true
      }
    },
    async onRefresh() {
      const { data } = await GetArticleList(this.channel.id, +new Date())
      // 清空列表数据
      this.list = data.results
      this.time = data.pre_timestamp
      this.isLoading = false
      // 重新加载数据
      // 将 loading 为 true，表示处于加载状态,为false表示处于加载完成状态
      this.$toast.success('刷新成功')
    },
    close(item) {
      this.$emit('showMore', item.art_id)
    }
  }

}
</script>

<style lang='scss' scoped>
 .article{
    .doge {
    width: 140px;
    height: 72px;
    margin-top: 8px;
    border-radius: 4px;
  }
   .meta{
     span{
       margin-right: 10px;
     }
     .close{
     float: right;
     margin-top: 4px;
   }
   }
 }
</style>
